<template>
  <div class="app-container">
    <!-- 基础信息 -->
    <h5 class="titleInfo">编辑供应商</h5>
    <el-form class="form" ref="form"  :model="form" :rules="rules" label-width="150px">
      <el-row>
        <el-col :span="24">
          <el-col :span="6">
            <el-form-item label="供应商名称" prop="supply_name">
              <el-input v-model="form.supply_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <span class="red">*需与营业执照名称一致</span>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-form-item label="关联分公司" prop="branch_office_id">
            <el-select v-model="form.branch_office_id">
              <el-option
                v-for="item in isVOption"
                :key="item.id"
                :label="item.nick"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="负责人姓名" prop="master_name">
            <el-input v-model="form.master_name"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="负责人手机号" prop="master_phone">
            <el-input v-model="form.master_phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <!-- <el-input v-model="form.descript"></el-input> -->
          <el-form-item label="发货地址" prop="daily_address">
            <el-cascader v-model="form.daily_address" :options="twoOptions" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button style="margin:30px 0" type="primary" @click="submitFn('form')">立即提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { editSupplier , catList , getSupplier} from "@/api/supplierMange";
import { getPro } from "@/api/shopMange";

export default {
  name: "supplierEdit",
  data() {
    // 电话号验证
    var validateNum = (rule, value, callback) => {
      const phoneNumber = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
      if (!value) {
        callback(new Error("请输入手机号码"));
      } else if (!(phoneNumber.test(value))) {
        callback(new Error("请输入正确手机号码"));
      } else {
        callback();
      }
    };
    return {
      form: {},
      twoOptions:[],
      isVOption:[],
      rules: {
        supply_name: [
          { required: true, message: "请输入供应商名称", trigger: "blur" }
        ],
        branch_office_id: [{ required: true, message: "请选择关联分公司", trigger: "blur" }],
        master_name: [
          { required: true, message: "请输入负责人姓名", trigger: "blur" }
        ],
        master_phone: [
          { required: true,validator:validateNum, trigger: "blur" }
        ],
        daily_address: [
          { required: true, message: "请选择发货地区", trigger: "blur" }
        ],
        address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
      },
    };
  },
  inject: ["reload"],
  created() {
    this.getArea() ;
    this.getCompanyList();
  },
  mounted() {
     this.getInfo()
  },
  methods: {
    //获取分公司列表
    getCompanyList() {
      catList()
        .then(res => {
          if(res.data.code==200){
          this.isVOption = res.data.data;
         }
        })
        .catch(error => {
          this.$message.error(error);
        });
      
    },
    getArea() {
      getPro().then(res=>{
        const newArr = [];
        res.data.forEach((item1, index) => {
          newArr.push({
            value: item1.value,
            label: item1.label
          });
          if (item1.children != null) {
            newArr[index]["children"] = [];
            item1.children.forEach(item2 => {
              newArr[index]["children"].push({
                value: item2.value,
                label: item2.label
              });
            });
          }
        });
        this.twoOptions = newArr;
      })
    },
    //详情
    getInfo(){
      let id = this.$route.query.id
      getSupplier({id:id}).then(res=>{
        if(res.data.code==200){
          this.form = {
            supply_name:res.data.data.name,
            branch_office_id:res.data.data.branch_office_id,
            master_name:res.data.data.master_name,
            master_phone:res.data.data.master_phone,
            daily_address:[res.data.data.send_province,res.data.data.send_city],
            address:res.data.data.address,
          }
        }
      }).catch(error=>{
        this.$message.error(error);
      })
    },
    // 修改提交
    submitFn(e) {
      this.$refs[e].validate(valid => {
        if (valid) {
          this.form.province_id = this.form.daily_address[0]
          this.form.city_id = this.form.daily_address[1]
          let datas = { ...this.form ,id:this.$route.query.id};
         
          editSupplier(datas,)
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  showClose: true,
                  message: "添加成功",
                  type: "success"
                });
                this.$router.push("/supplierList");
                this.reload();
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: "warning"
                });
              }
            })
            .catch(error => {
              this.$message.error(error);
            });
        } else {
          this.$message({
            message: "必填项不能为空",
            type: "warning"
          });
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 0px !important;
}
.red{
  color: red;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
}
</style>